import * as React from 'react'
import { Row, Col } from 'antd/es'

interface QuizDescriptionProps {
    isExample: boolean,
    initializedBox: any,
    description: string
}

const QuizDescription: React.FC<QuizDescriptionProps> =
    ({ isExample, initializedBox, description }) => {
        return <div>
            {isExample ? <h1 style={{ color: '#C00' }}>此题为例题，无需作答</h1> : ''}

            <Row>
                <Col span={3}>
                    <div className='description-title'>编号:</div>
                    <div className='description-title'>数字:</div>
                    <div className='description-title'>指令:</div>
                </Col>
                {
                    JSON.parse(initializedBox)
                        .filter((idx: number) => idx > 0)
                        .map((box: any, idx: number) => {
                            return (
                                <Col key={idx} span={2}>
                                    <div className='description-number'>{idx + 1}</div>
                                    <div className='description-box'>{box}</div>
                                </Col>
                            )
                        })
                }
            </Row>

            <div>
                <ol>
                    {
                        JSON.parse(description)
                            .filter((ins: any) => ins.length > 0)
                            .map((ins: any, idx: number) => {
                                return (
                                    <li style={{ lineHeight: '3' }} key={idx}>{ins}</li>
                                )
                            })
                    }
                </ol>
            </div>
        </div>
    }

export default QuizDescription